<template>
  <div>
    <el-button type="primary" :disabled="running">开始检查</el-button>
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="name" label="项目"> </el-table-column>
      <el-table-column prop="table" label="表名"> </el-table-column>
      <el-table-column prop="key" label="key"> </el-table-column>
      <el-table-column prop="desc" label="描述"> </el-table-column>
    </el-table>
  </div>
</template>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

<script>
export default {
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
  },
  data() {
    return {
      running: false,
      tableData: [
        {
          name: "456主玩法界面服饰预览",
          table: "actvtity_title",
          key: "suit#[]",
          desc: "套装id",
        },
        {
          name: "456主玩法界面服饰预览",
          table: "actvtity_title",
          key: "suit#[]",
          desc: "套装id",
        },
        {
          name: "456主玩法界面服饰预览",
          table: "actvtity_title",
          key: "suit#[]",
          desc: "套装id",
        },
        {
          name: "456主玩法界面服饰预览",
          table: "actvtity_title",
          key: "suit#[]",
          desc: "套装id",
        },
        {
          name: "456主玩法界面服饰预览",
          table: "actvtity_title",
          key: "suit#[]",
          desc: "套装id",
        },
        {
          name: "456主玩法界面服饰预览",
          table: "actvtity_title",
          key: "suit#[]",
          desc: "套装id",
        },
      ],
    };
  },
};
</script>